<template>
	<view>
		<view class="groupingList">
			<view :class="activeitem==index?'groupingItem active':'groupingItem'" v-for="(item,index) in  groupListT" :key="index" @click="activeGroupingItem(item,index)">
				<view class="l">
					<view class="groupingName">
						{{item.name}}
					</view>
					<view class="tip">
						（{{item.num}}个设备）
					</view>
				</view>
				<view class="r" v-if="item.id!=0">
					<text @click="showModel(2,item)">					编辑</text>
					<text class="del" @click="del(item)">删除</text>
				</view>
			</view>
		</view>
		<z-modal ref="zModel" :show="modalControl" :placeholderText="'填写分组名称'" :btnGroup="btnGroup" :contentType="2" :titleText="modelStatus==1?'添加分组':'编辑名称'"
			@cancle="cancle" @sure="sure"></z-modal>
		<button class="add-btn" @click="showModel(1)">添加分组</button>
	</view>
</template>

<script>
	import zModal from '@/components/z-modal/z-modal.vue'
	export default {
		data() {
			return {
				btnGroup: [{
						text: '取消',
						color: '#FFFFFF',
						bgColor: '#999999',
						width: '150rpx',
						height: '80rpx',
						shape: 'fillet',
						eventName: 'cancle'
					},
					{
						text: '确定',
						color: '#FFFFFF',
						bgColor: '#007AFF',
						width: '150rpx',
						height: '80rpx',
						shape: 'fillet',
						eventName: 'sure'
					}
				],
				modalControl:false,
				groupListT:[],
				status:0,
				activeitem:null,
				modelStatus:1,
				itemgroup:{}
			};
		},
		onLoad(option){
			if(option.status==1){
				this.status = option.status
			}
			this.grouping()
		},
		methods:{
			cancle() {
				this.modalControl = false
			},
			del(item){
				uni.showModal({
					content: '确定要删除该分组吗?',
					success: (e) => {
						if (e.confirm) {
							this.$fun.ajax.post('butt/delGroup', {id:item.id}).then(res => {
								if (res.code == 1) {
									this.$fun.msg('删除成功')
									this.grouping()
								}
							})
						}
					}
				});
			},
			showModel(status,item){
				this.modalControl=true
				this.modelStatus = status
				if(status==2){
					this.itemgroup = item
				}
			},
			grouping(){
				this.$fun.ajax.post('butt/groupList', {}).then(res => {
					if (res.code == 1) {
						this.groupListT = res.data
					}
				})
			},
			sure(e) {
				if(this.modelStatus==1){
					if (e.inputText == '') {
						this.$fun.msg('请填写分组名称')
						return;
					}
					this.$fun.ajax.post('butt/addGroup', {
						name: e.inputText,
					}).then(res => {
						if (res.code == 1) {
							this.$fun.msg(res.msg);
							this.modalControl = false
							setTimeout(() => {
								this.grouping()
							}, 500)
						}
					})
				}else{
					if (e.inputText == '') {
						this.$fun.msg('请填写分组名称')
						return;
					}
					this.$fun.ajax.post('butt/addGroup', {
						name: e.inputText,
						id:this.itemgroup.id
					}).then(res => {
						if (res.code == 1) {
							this.$fun.msg(res.msg);
							this.modalControl = false
							setTimeout(() => {
								this.grouping()
							}, 500)
						}
					})
				}
				
			},
			activeGroupingItem(item,index){
				if(this.status==1){
					this.activeitem = index
					uni.navigateBack({
						group_id:item.id
					})
					uni.$emit('updateData', item)
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #EEEEEE;
		.groupingList{
			margin: 25rpx 32rpx;
			.groupingItem{
				width: 100%;
				height: 112rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
				margin-bottom: 20rpx;
				border: 1px solid transparent;
				.l{
					display: flex;
					align-items: center;
					.groupingName{
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
					.tip{
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
				.r{
					font-size: 28rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #2a80f7;
				}
			}
			.active{
				border: 1px solid #2a80f7;
			}
			.del{
				color: red;
				margin-left: 20rpx;
			}
		}
		.add-btn {
			position: fixed;
			left: 30upx;
			right: 30upx;
			bottom: 16upx;
			z-index: 95;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690upx;
			height: 80upx;
			font-size: 32upx;
			color: #fff;
			background-color: #2a80f7;
			border-radius: 10upx;
			box-shadow: 1px 2px 5px #2a80f7;
		}
	}

</style>
